<template>
  <div>
    <div class="box">
      <el-button type="primary" @click="handleAddType">增加栏目</el-button>
      <el-button type="primary" @click="handleMakeAllHtml">全部生成</el-button>
      <el-button type="primary" @click="handleMakeIndexHtml">生成首页</el-button>
    </div>
    <div class="box">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="typeId"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="类型名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="typeAlias"
            label="栏目别名"
            width="150">
          </el-table-column>
<!--          <el-table-column
            prop="tempIndex"
            label="首页模板"
            width="180">
          </el-table-column>
          <el-table-column
            prop="tempList"
            label="列表模板"
            width="220">
          </el-table-column>
          <el-table-column
            prop="tempArticle"
            label="文章模板"
            width="220">
          </el-table-column> -->
          <el-table-column
            prop="sortRank"
            label="排序"
            width="80">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="220">
          </el-table-column>
          <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="gotoTemplate(scope.$index, scope.row)">内容模板</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="gotoNews(scope.$index, scope.row)">新闻管理</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="makeTypeHtml(scope.$index, scope.row)">生成页面</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>

    <!-- 添加修改对话框 -->
    <div style="margin: 10px;">
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="栏目名称" prop="typeName" :label-width="formLabelWidth">
            <el-input v-model="form.typeName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目别名" prop="typeAlias" :label-width="formLabelWidth">
            <el-input v-model="form.typeAlias" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="首页模板" :label-width="formLabelWidth">
            <el-input v-model="form.tempIndex" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="列表模板" :label-width="formLabelWidth">
            <el-input v-model="form.tempList" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章模板" :label-width="formLabelWidth">
            <el-input v-model="form.tempArticle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目排序" :label-width="formLabelWidth">
            <el-input v-model="form.sortRank" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目SEO标题" :label-width="formLabelWidth">
            <el-input v-model="form.typeTitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目SEO描述" :label-width="formLabelWidth">
            <el-input v-model="form.typeDescription" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目SEO关键字" :label-width="formLabelWidth">
            <el-input v-model="form.typeKeywords" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitSaveChannel">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {articleTypeListAll,setArticleType,addArticleType,makeIndexHtml,makeListHtml,makeDetailHtml,makeAllHtml,makeDetailHtmlByTypeId} from '@/api/news.js'

  export default {
    name: 'Channel',
    data() {
      return {
        tableData: [],
        formTitle: '',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form: {
          typeId: null,
          typeName: null,
          typeAlias: null,
          tempIndex: null,
          tempList: null,
          tempArticle: null,
          sortRank: 0,
          typeTitle: null,
          typeDescription: null,
          typeKeywords: null,
          extendVars: null,
        },
        rules: {
          typeName: [{ required: true, message: '请输入栏目名称', trigger: 'blur' }],
        }
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        articleTypeListAll().then(res => {
          console.log('loadList', res)
          if(res.code == 200) {
            this.tableData = res.data
          }
          else {
            let msg = res.msg
            this.$message.error(msg)
          }
        })
      },
      resetForm() {
        this.form = {
          typeId: null,
          typeName: null,
          typeAlias: null,
          tempIndex: null,
          tempList: null,
          tempArticle: null,
          sortRank: 0,
          typeTitle: null,
          typeDescription: null,
          typeKeywords: null,
          extendVars: null,
        }
      },
      handleAddType() {
        console.log('handleAddType')
        this.formTitle = '添加栏目'
        this.dialogFormVisible = true
      },
      handleEdit(index,row) {
        console.log('handleEdit')
        this.formTitle = '修改栏目类型'
        this.form = row
        this.dialogFormVisible = true
      },
      handleDelete(index,row) {
        console.log('handleDelete')
      },
      submitSaveChannel() {
        console.log('submitSaveChannel')
        this.$refs.form.validate((valid) => {
          if(valid) {
            if(this.form.typeId == null) {
              // 添加
              addArticleType(this.form).then(res => {
                if(res.code == 200) {
                  this.dialogFormVisible = false
                  this.$message.success("修改成功")
                  this.resetForm()
                  this.loadList()
                }
                else {
                  let msg = res.msg
                  this.$message.error(msg)
                }
              })
            }
            else {
              // 修改
              setArticleType(this.form).then(res => {
                if(res.code == 200) {
                  this.dialogFormVisible = false
                  this.$message.success("修改成功")
                  this.resetForm()
                  this.loadList()
                }
                else {
                  let msg = res.msg
                  this.$message.error(msg)
                }
              })
            }
          }
          else {
            console.log('error submit!!');
            return false;
          }
        })

      },
      gotoTemplate(index,row) {
        console.log('gotoTemplate', row.typeId);
        this.$router.push('/news/vars/'+row.typeId)
      },
      gotoNews(index,row) {
        console.log('gotoNews', row.typeId);
        this.$router.push('/news/list/'+row.typeId)
      },
      makeTypeHtml(index, row) {
        console.log('makeTypeHtml', row.typeId)
        let param = {id: row.typeId}
        makeListHtml(param).then(res => {
          console.log('makeListHtml');
          if(res.code == 200) {
            this.$message.success("生成首页成功")
          }
          else {
            this.$message.success("生成首页失败")
          }
        })
        makeDetailHtmlByTypeId(param).then(res => {
          console.log('makeListHtml');
        })
      },
      handleMakeIndexHtml() {
        console.log('handleMakeIndexHtml')
        let param = {}
        makeIndexHtml(param).then(res => {
          console.log('handleMakeIndexHtml', res)
          if(res.code == 200) {
            this.$message.success("生成首页成功")
          }
          else {
            this.$message.success("生成首页失败")
          }
        })
      },
      handleMakeAllHtml() {
        console.log('handleMakeAllHtml')
        let param = {}
        makeAllHtml(param).then(res => {
          console.log('makeAllHtml', res)
        })
      },
    }
  }
</script>

<style scoped>
  .box {
    margin: 10px;
  }
</style>
